<template>
	<view class="container">
		<up-sticky>
			<up-row customStyle="padding:10px 10px;background:#ffffff;">
				<up-col span="1">
					<up-icon name="list" size="24" @click="openPicker" data-eventsync="true"></up-icon>
				</up-col>
				<up-col span="3" customStyle="font-size:16px;color:#0000ff;" @click="openPicker" data-eventsync="true">
					<text class="u-line-1">{{categoryText}}</text>
				</up-col>
				<up-col span="1">
					<up-icon name="arrow-right-double" size="16" @click="openPicker"></up-icon>
				</up-col>
				<up-col span="7">
					<up-search placeholder="请输入内容搜索关键词"
					:disabled="true"
					v-model="keyword"
					@click="toSearch"
					 @search="handleSearch" 
					 @custom="handCustom"
					 @clear="handClear"
					  animation></up-search>
				</up-col>
			</up-row>
		</up-sticky>
		<unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" :collection="collection"
			:where="where" loadtime="onready">
			<view v-if="error">{{error.message}}</view>
			<view v-else-if="data">
				<uni-list>
					<uni-list-item v-for="(item, index) in data" :key="index" showArrow :clickable="true"
						@click="handleItemClick(item._id)">
						<template v-slot:body>
							<text class="u-line-2">
								<text style="color:#999;">【{{item.category_id[0].text.substring(0,2)}}】</text>
								{{item.title}}
							</text>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			<uni-load-more :contentText="loadMore"
				:status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
		</unicloud-db>
		<!--    <uni-fab ref="fab" horizontal="right" 
	vertical="bottom" :pop-menu="false" 
	@fabClick="fabClick" /> -->
		<!-- 		<up-popup :safeAreaInsetBottom="true" :safeAreaInsetTop="true" mode="left" 
		:show="showCO" round="20" :closeable="true"
		@close="showCO=false">
			<view class="popup-content" style="width:500rpx;height:100vh;background-color: #f8f8f8;">
			</view>
		</up-popup> -->
		<up-picker :show="showCO" :value="currentCategory" :columns="categoryList" visibleItemCount="12" keyName="text"
			@cancel="showCO=false" @confirm="handleConfirm" @close="showCO=false" ref="picker"></up-picker>
	</view>
</template>

<script>
	import {
		ref,
		toRaw,
		markRaw
	} from 'vue';
	const db = uniCloud.databaseForJQL();
	const dbName = 'uni-cms-articles',	dbCategoryName = 'uni-cms-categories';
	export default {
		setup() {
			return {
				mtitle: ref('典型案例'), // 页面标题。
				showCO:ref(false),
				udb: ref(null),
				picker: ref(null),
				categoryList: ref([
					[{
						"_id": "",
						//"value": "",
						"text": "全部类别",
					}]
				]),
				where: ref(''),
				currentCategory: '',
				categoryText:ref('全部类别'),
				keyword: ref(''),
				collection: ref([]),
				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: '该类目下无更多数据了'
				}
			}
		},
/* 		data() {
			return {
			}
		}, */
		watch: {
			mtitle: {
				handler(n, o) {
					uni.setNavigationBarTitle({
						title: `${n}(${this.categoryText})`
					})
				},
				immediate: true
			},
			categoryText: {
				handler(n, o) {
					uni.setNavigationBarTitle({
						title: `${this.mtitle}(${n})`
					})
				},
				//immediate: true
			}
		},
		onLoad() {
			db.collection(dbCategoryName).field('name as text,sort').orderBy('sort').get().then(
				res => {
					this.categoryList = [
						[{
							"_id": "",
							"text": "全部类别",
							"sort":0
						}, ...res.data]
					]
				}).catch(err => {
				console.error(err);
			});
			this.collection = this.getCollection();
		},
		onReady() {
			this.udb.loadData({
				clear: true
			})

		},
		onPullDownRefresh() {
			this.udb.loadData({
				clear: true
			}, () => {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			this.udb.loadMore()
		},
		methods: {
			setNavTitle() {
				uni.setNavigationBarTitle({
					title: `${this.mtitle}(${this.categoryText})`
				})
			},
			toSearch() {

			}, // 处理搜索事件。
			handleSearch(e){
				console.log('handleSearch',e) // 获取搜索框的值，并更新查询条件。
			},
			handCustom(e){console.log('handCustom',e)},
			handClear(e){console.log('handClear',e)},
			getCollection() {
				let where = this.currentCategory ?
					`article_status==1 && category_id=="${this.currentCategory}"` :
					'article_status==1';
				const cl = [db.collection(dbName)
					.where(where)
					.field('category_id,title,excerpt,last_modify_date')
					.orderBy('last_modify_date', 'desc')
					.getTemp(),
					db.collection(dbCategoryName).field('name as text, _id')
					.getTemp()
				]
				return cl
			},
			openPicker(e) {
				this.showCO = true
			},
			handleConfirm(e) {
				//const {indexs,value,values}=e;
				const {
					value
				} = e; // 获取选择的分类ID，并更新查询条件。
				const id = value[0]._id; // 更新查询条件，并重新加载数据。
				if (this.currentCategory !== id) {
					this.currentCategory = id; // 更新查询条件，并重新加载数据。
					this.categoryText = value[0].text; // 更新查询条件，并重新加载数据。
					this.collection = this.getCollection(); // 重新加载数据。
				}
				this.showCO = false; // 关闭分类选择器。
			},
			handleItemClick(id) {
				uni.navigateTo({
					url: './detail?id=' + id
				})
			},
			/* fabClick() {
				// 打开新增页面
				uni.navigateTo({
					url: './add',
					events: {
						// 监听新增数据成功后, 刷新当前页面数据
						refreshData: () => {
							this.udb.loadData({
								clear: true
							})
						}
					}
				})
			} */
		}
	}
</script>

<style>
</style>